@import "_function";

.user-page{
.header {
  .bc(#cf4cff);
  .p(0, 30, 0, 30);
  .headerTop {
    .h(88);
    .fs(30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fffefe;
    .back {
      img {
        .w(27);
        .h(44);
      }
    }
  }
  .headerBottom {
    .h(162);
    color: #fefefe;
    overflow: hidden;
    .left {
      .w(310);
      .fl();
      overflow: hidden;
      img {
        .w(120);
        .h(120);
        .fl();
      }
      span {
        .w(160);
        .fs(36);
        .fl();
        .p(15, 0, 30, 30);
      }
      p {
        .w(160);
        .h(30);
        .lh(30);
        .ml(30);
        .fs(20);
        .br(24);
        .bc(#d666ff);
        .tc();
        .fl();
        vertical-align: bottom;
      }
    }
    .right {
      .w(160);
      .h(30);
      .fr();
      .bc(#d666ff);
      .br(24);
      .fs(20);
      span {
        .pl(20);
        .lh(30);
      }
      em {
        .pl(14);
      }
    }
  }
}
.content {
  .may {
    .mt(30);
    .pr(86);
    .pl(78);
    .pb(30);
    border-bottom: 1px solid #cccccc;
    ul {
      display: flex;
      justify-content: space-between;
      li {
        img {
          .w(76);
          .h(76);
        }
        p {
          .pt(12);
          .tc();
          .fs(36);
          color: #666666;
        }
      }
    }
  }
  .address {
    .mt(37);
    .pl(30);
    .pr(30);
    border-bottom: 1px solid #cccccc;
    li {
      overflow: hidden;
      .ad {
        .w(25);
        .h(32);
        .fl();
        .mr(22);
      }
      span {
        .fs(24);
        .fl();
        color: #666666;
      }
      .right-arrow {
        .w(17);
        .h(28);
        .fr();
      }
    }
    button {
      .w(120);
      .h(34);
      .lh(34);
      .fs(20);
      .mt(23);
      .mb(37);
      .bc(#d666ff);
      .br(8);
      .db();
      color: #fbf4fe;
      border: 0;
    }
  }
  .my-order {
    .h(62);
    .p(18, 30, 18, 30);
    overflow: hidden;
    border-bottom: 1px solid #cccccc;
    p {
      .fs(30);
      .fl();
      .lh(62);
      color: #333333;
    }
    .more-order {
      .fr();
      overflow: hidden;
      a {
        float: left;
        .fs(20);
        .lh(62);
        .mr(40);
        color: #666666;
      }
      img {
        float: left;
        .w(17);
        .h(28);
        .mt(17);
      }
    }
  }
  .flow {
    .pl(30);
    .pr(30);
    .mt(68);
    display: flex;
    justify-content: space-between;
    div {
      width: 20%;
      .h(100);
      .pr();
      img {
        .db();
        .w(60);
        margin: 0 auto;
      }
      p {
        width: 100%;
        .fs(20);
        .tc();
        .pa();
        color: #666666;
        bottom: 0;
      }
    }
  }
}
footer{
  .bc(#ebb2ff);
  .w(690);
  .db();
  .h(98);
  .pf();
  bottom: 0;left: 0;
  .p(0,30,0,30);
  .option1 i{
    background: url("../img/order_f_index.png")no-repeat;
    .w(46);
    .h(46);
    .bgs(46,46);
  }
  .option2 i{
    background: url("../img/home_f_class.png")no-repeat;
    .bgs(46,46);
    .w(46);
    .h(46);
  }
  .option3 i{
    background: url("../img/home_f_shopcart.png")no-repeat;
    .bgs(51,46);
    .w(51);
    .h(46);
  }
  .option4 i{
    background: url("../img/order_f_user.png") no-repeat;
    .bgs(42,46);
    .w(42);
    .h(46);
  }
  .option1,.option2,.option3,.option4{
    .fl();
    .w(78);
    .mt(8);
    i{
      .db();
      margin: 0 auto;
    }
    b{
      .db();
      .tc();
      .lh(24);
      .w(78);
      .fs(20);
      .mt(10);
      .c(#333333);
    }
  }
  div~div{
    .ml(126);
  }


}
}